<template>
    <el-dialog class="select-mvc-dialog" title="请选择生成的层" width="30%"
               :closeOnClickModal="false"
               :visible.sync="visible" :before-close="handleClose" appendToBody>

        <el-checkbox-group class="checkbox-group" v-model="selects" size="small">
            <el-checkbox class="checkbox" label="Controller" border></el-checkbox>
            <br>
            <el-checkbox class="checkbox" label="Service" border></el-checkbox>
            <br>
            <el-checkbox class="checkbox" label="ServiceImpl" border></el-checkbox>
            <!--<br>
            <el-checkbox class="checkbox" label="Mapper" border></el-checkbox>-->
        </el-checkbox-group>

        <div slot="footer">
            <el-button type="info" @click="submitClick">确 认</el-button>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
    /**
     * @author 白雨浓
     * @date 2018/1/17 19:52
     *
     * 选择MVC分层 窗口
     **/
    export default{
        name: 'AcSelectMvcDialog',
        props: ['dialogVisible',],
        data(){
            return {
                visible: this.dialogVisible,
                selects: ['Controller', 'Service', 'ServiceImpl'],
            }
        },
        mounted(){
            this.$nextTick(() => {

            })
        },
        methods: {
            submitClick(){
                this.$emit('onSubmit', this.selects);
                this.visible = false;
            },
            /** 关闭处理 */
            handleClose(){
                this.visible = false;
                this.$emit('onClose');
                setTimeout(() => this.$emit('update:dialogVisible', false), 300);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .select-mvc-dialog {

        .checkbox-group {
            text-align center
        }

        .checkbox {
            display inline-block
            width 50%
            margin 5px auto
        }

    }
</style>